<template>
    <div :title="title" class="icon-cnt">
        <h1 class="title">
            <span class="info">
                <i class="icon-l iconfont icon-gengduo-hengxiang"></i>
                {{title}}
                <i class="icon-r iconfont icon-gengduo-hengxiang"></i>
            </span>
        </h1>
    </div>
</template>

<script>
export default {
    name: "titleIconComponent",
    props: {
        title: {
            type: String,
            default ( ) {
                return '标题'
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.icon-cnt
    width 100%
    height 45px
    line-height 45px
    overflow hidden
    .title 
        width 100%
        height 100%
        font-size 18px
        color #333
        font-weight bold
        text-align center
        overflow hidden
        .info 
            position relative
            padding 0 40px
            .icon-l 
                position absolute 
                left 0
                top 50%
                transform translate(0,-50%)
            .icon-r 
                position absolute 
                right 0
                top 50%
                transform translate(0,-50%)
</style>